<template>
  <!-- 分页组件 -->
  <el-pagination
    :background="true"
    :current-page="pageData.pageNum"
    :page-size="pageData.pageSize"
    :page-sizes="[10, 25, 50, 100]"
    :total="pageData.total"
    layout="total, sizes, prev, pager, next, jumper"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  ></el-pagination>
</template>

<script lang="ts">
export default {
  name: "Pagination",
};
</script>
<script setup lang="ts">
interface PageType {
  pageNum: number;
  pageSize: number;
  total: number;
}

interface PaginationProps {
  pageData: PageType;
  handleSizeChange: (size: number) => void;
  handleCurrentChange: (currentPage: number) => void;
}

defineProps<PaginationProps>();
</script>

<style lang="scss" scoped>
:deep(.el-pagination__editor.el-input .el-input__inner) {
  line-height: inherit;
}
.el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>